<template>
  <div class="app-container">
    <!--对象操作-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Back" @click="handleBack">
          返回
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Refresh"
          @click="handleRefresh"
          v-hasPermi="['tms:testdesign:query']"
          >刷新
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Cherry"
          @click="handleTags"
          v-hasPermi="['tms:testdesign:query']"
          >标签
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Cherry"
          @click="handleNotes"
          v-hasPermi="['tms:testdesign:query']"
          >备注
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Cherry"
          @click="handleIcons"
          v-hasPermi="['tms:testdesign:query']"
          >图标
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Cherry"
          @click="handleLayout"
          v-hasPermi="['tms:testdesign:query']"
          >结构
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Cherry"
          @click="handleTheme"
          v-hasPermi="['tms:testdesign:query']"
          >主题
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Coin"
          @click="handleSave"
          v-hasPermi="['tms:testdesign:save']"
          >保存
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Upload"
          @click="handleImport"
          v-hasPermi="['tms:testdesign:import']"
          >导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-dropdown
          @command="handleCommand"
          v-hasPermi="['tms:testdesign:export']"
        >
          <el-button type="warning" plain icon="Download">
            导出<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="smm">SMM</el-dropdown-item>
              <el-dropdown-item command="json">JSON</el-dropdown-item>
              <el-dropdown-item command="png">PNG</el-dropdown-item>
              <el-dropdown-item command="svg">SVG</el-dropdown-item>
              <el-dropdown-item command="pdf">PDF</el-dropdown-item>
              <el-dropdown-item command="png">PNG</el-dropdown-item>
              <el-dropdown-item command="xmind">XMind</el-dropdown-item>
              <el-dropdown-item command="md">MarkDown</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
    <div v-loading="loading">
      <y-mind ref="designMindRef" :mindData="form.params" :name="form.name" />
    </div>
    <!-- 导入对话框-->
    <el-dialog v-model="showInportDialog" title="导入文件" width="500">
      <input v-if="showInput" type="file" @input="onInput" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resetInput">重置</el-button>
          <el-button @click="showInportDialog = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="TestDesignInfo">
import { getTestDesign, updateTestDesign } from "@/api/tms/testdesign";

const { proxy } = getCurrentInstance();

const loading = ref(false);
const showInput = ref(true);
const showInportDialog = ref(false);

const data = reactive({
  form: {},
});

const { form } = toRefs(data);

/** 获取计划详情 */
async function getInfo() {
  loading.value = true;
  const id = proxy.$route.params.id;

  try {
    const response = await getTestDesign(id);
    form.value = response.data;
  } catch (error) {
    console.error("Failed to fetch test design:", error);
    // 这里可以处理错误，比如显示错误信息给用户
  } finally {
    loading.value = false; // 确保加载状态被设置为false，无论请求成功或失败
  }
}

/** 返回按钮操作 */
function handleBack() {
  proxy.$router.back();
}

/** 刷新按钮操作 */
async function handleRefresh() {
  await getInfo();
}

/** 标签按钮操作 */
async function handleTags() {
  proxy.$refs.designMindRef.activedPanel = "tag";
}

/** 备注按钮操作 */
async function handleNotes() {
  proxy.$refs.designMindRef.activedPanel = "note";
}

/** 图标按钮操作 */
async function handleIcons() {
  proxy.$refs.designMindRef.activedPanel = "icon";
}

/** 结构按钮操作 */
async function handleLayout() {
  proxy.$refs.designMindRef.activedPanel = "layout";
}

/** 主题按钮操作 */
async function handleTheme() {
  proxy.$refs.designMindRef.activedPanel = "theme";
}

/** 保存按钮操作 */
async function handleSave() {
  try {
    const mindData = proxy.$refs.designMindRef.getMindData();
    if (!mindData) {
      proxy.$modal.msgError("无有效数据保存");
      return;
    }

    form.value.params = mindData;
    await updateTestDesign(form.value);
    proxy.$modal.msgSuccess("保存成功");
  } catch (error) {
    console.error("保存失败:", error);
    proxy.$modal.msgError("保存失败，请稍后再试");
  }
}

/** 导入按钮操作 */
function handleImport() {
  showInportDialog.value = true;
}

/** 选择文件事件 */
function onInput(e) {
  proxy.$refs.designMindRef.onInput(e);
  showInportDialog.value = false;
}

/** 重置已选择的文件按钮操作 */
function resetInput() {
  showInput.value = false;
  nextTick(() => {
    showInput.value = true;
  });
}

/** 导出按钮操作 */
function handleCommand(type) {
  proxy.$refs.designMindRef.onExport(type);
}

onMounted(async () => {
  await getInfo();
});
</script>
